<template>
    <div>
        <i-page-header class="product_tabs" :title="title"></i-page-header>



        <Card :bordered="false" dis-hover class="ivu-mt">
            <Form ref="formValidate" :model="formValidate">
                <Row type="flex"  :gutter="24">
                    <Col v-bind="grid">
                        <FormItem label="搜索："  label-for="status2">
                            <Input search enter-button placeholder="请输入产品名称" v-model="formValidate.name" @on-search="userSearchs"/>
                        </FormItem>
                    </Col>
                </Row>
                <Row type="flex">
                    <Col v-bind="grid">
                        <Button type="primary" @click="tapAdd"  icon="md-add">添加产品</Button>
                    </Col>
                </Row>
            </Form>

            <Table :columns="columns1" :data="tableData" class="mt25" no-userFrom-text="暂无数据"
                   no-filtered-userFrom-text="暂无筛选结果"  :loading="loading" highlight-row>

                <template slot-scope="{ row }" slot="image">
                    <div class="tabBox_img">
                        <img v-image-preview style="cursor: pointer;" :src="$utils.imgAr(row.img,0)" v-lazy="$utils.imgAr(row.img,0)">
                    </div>
                </template>


                <template slot-scope="{ row,  }" slot="action">
                    <a @click="tapDel(row.id)">移除</a>
                </template>

                <template slot-scope="{ row,  }" slot="status">
                    <Tag color="default" v-if="row.status == 0">下架</Tag>
                    <Tag color="primary" v-else>上架</Tag>
                </template>
            </Table>

            <div class="acea-row row-right page">
                <Page :total="page.count" show-elevator show-total @on-change="tapPage"
                      :page-size="page.pageSize"/>
            </div>
        </Card>



        <Modal
                v-model="newsCateBoxShow"
                :title="proTitle"
                width="650px"
                @on-cancel="newsCateBoxClose">

            <div class="fx-r" style="padding: 20px 0;">
                <el-input type="text" v-model="catePro.name" style="width: 200px;margin-right: 10px;"
                          placeholder="请输入产品名称"/>

                <el-button type="primary" style="margin-left: 6px;" @click="tapCateProSeach">查询</el-button>
            </div>

            <el-table
                    :data="catePro.data"
                    v-loading="catePro.loading"
                    :stripe="true"
                    :border="true"
                    height="350px"
            >


                <el-table-column
                        prop="id"
                        label="商品ID"
                        align="center"
                        width="150">
                </el-table-column>

                <el-table-column
                        label="商品图"
                        align="center"
                        width="150">
                    <template slot-scope="scope">
                        <div class="tabBox_img">
                            <img v-image-preview style="cursor: pointer;" :src="$utils.imgAr(scope.row.img,0)" v-lazy="$utils.imgAr(scope.row.img,0)">
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="title"
                        width="210"
                        label="商品名称">
                </el-table-column>

                <el-table-column
                        prop="price"
                        label="全网价格"
                        width="140">
                </el-table-column>

                <el-table-column
                        prop="commission"
                        label="商品售价"
                        width="140">
                </el-table-column>


                <el-table-column
                        label="选择栏目"
                        fixed="right"
                        width="80">
                    <template slot-scope="scope">
                        <a v-if="checkSelect(scope.row.id)" @click="tapSelect(scope.row)" style="color: red">取消选择</a>
                        <a v-else   @click="tapSelect(scope.row)">选择栏目</a>
                    </template>
                </el-table-column>
            </el-table>

            <div class="acea-row row-right page">
                <Page :total="catePro.count" show-elevator show-total @on-change="tapCateProPage"
                      :page-size="catePro.pageSize"/>
            </div>




            <span slot="footer" class="dialog-footer">
          <el-button @click="newsCateBoxShow = false">取 消</el-button>
          <el-button type="primary" @click="formSub">确 定</el-button>
      </span>
        </Modal>


    </div>
</template>

<script>
    import IPageHeader from "@/layouts/system/page-header/index";
    import { mapState, mapActions } from 'vuex';
    import UiUpload from "@/ui/upload/index";
    import Setting from "@/setting";
    import util from "@/libs/util";
    import {
        SystemPartitionPro,
        SystemPartitionProAll,
        SystemPartitionProdel,
        SystemPartitionProsub
    } from "../../../api/system/partition";
    import PageCache from "../../../utils/PageCache";
    var pageCache = null;
    export default {
        name: "product_index",
        components: {UiUpload, IPageHeader},
        computed: {
        },
        data() {
            return {
                title:"分区数据",
                proTitle:"添加产品",
                dialogVisible:false,
                newsCateBoxShow:false,
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                columns1: [
                    {
                        title: '商品ID',
                        key: 'id',
                        width: 80
                    },
                    {
                        title: '商品图',
                        slot: 'image',
                        minWidth: 80
                    },
                    {
                        title: '商品名称',
                        key: 'title',
                        minWidth: 250
                    },
                    {
                        title: '全网价格',
                        key: 'price',
                        minWidth: 90
                    },
                    {
                        title: '商品售价',
                        key: 'commission',
                        minWidth: 90
                    },
                    {
                        title: '销量',
                        key: 'sales',
                        sortable: true,
                        minWidth: 90
                    },
                    {
                        title: '库存',
                        key: 'count',
                        minWidth: 80
                    },
                    {
                        title: '排序',
                        key: 'seq',
                        minWidth: 70
                    },
                    {
                        title: '状态',
                        slot: 'status',
                        width: 100,
                        filters: [
                            {
                                label: '上架',
                                value: 1
                            },
                            {
                                label: '下架',
                                value: 0
                            }
                        ],
                        filterMethod (value, row) {
                            return row.is_show === value;
                        },
                        filterMultiple: false
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        fixed: 'right',
                        minWidth: 220
                    }
                ],
                catePro:{
                    name:"",
                    pageCount:0,
                    pageSize:0,
                    data:[],
                    loading:false,
                },
                loading: true,
                tableData: [],
                page : {
                    count : 0,//一共多少数量
                    pageSize : 0,//每一页码数量
                    page : 1,//当前页码
                },
                selectAr:[],
                formValidate:{name:""},
                partition_id:0
            }
        },
        created() {
            pageCache = new PageCache(this);
        },
        mounted(){

            this.initView();
        },
        watch: {
            '$route'(to, from) {
                pageCache.routeView(to, (type, data) => {
                    if (type == 'update') {
                        this.initView();
                    }

                    if (type == 'cache') {
                        this.$forceUpdate();
                        Object.assign(this.$data, data);
                    }
                });
            }
        },
        methods: {
            initView : function(){
                this.partition_id = this.$route.query.id || 0;
                this.title = this.$route.query.title || "";
                this.getData();
            },
            //
            tapCateProSeach:function(){
                this.catePro.page = 1;
                this.cateProList();
            },
            //
            tapCateProPage:function(i){
                this.catePro.page = i;
                this.cateProList();
            },
            /**
             * 获取数据
             */
            getData:function () {
                var data = {
                    keywork : this.formValidate.name,
                    page : this.page.page,
                    partition_id : this.partition_id
                };
                SystemPartitionPro(data)
                    .then(res=>{
                        this.loading = false;
                        if(res.code == 200) {
                            this.tableData = res.data.list;
                            this.page.pageSize = res.data.pageSize;
                            this.page.count = res.data.pageCount;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.loading = false;
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },

            cateProList:function(){
                var data = {
                    keywork : this.catePro.name,
                    page : this.catePro.page,
                    partition_id : this.partition_id
                };
                this.$utils.loading(this, "获取中...");
                SystemPartitionProAll(data)
                    .then(res=>{
                        this.$utils.loadingClose();
                        if(res.code == 200) {
                            this.catePro.data = res.data.list;
                            this.catePro.pageSize = res.data.pageSize;
                            this.catePro.count = res.data.pageCount;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },

            /**
             * 选择
             */
            tapSelect:function(row){
                for (var i in this.selectAr) {
                    if(this.selectAr[i].id == row.id) {
                        this.$delete(this.selectAr,i);
                        return;
                    }
                }
                this.selectAr.push({name:row.title,id:row.id});
            },


            userSearchs () {
                this.page.page = 1;
                this.loading = true;
                this.getData();
            },
            editClose:function(){
                this.dialogVisible = false;
            },
            /**
             * 分页
             */
            tapPage:function(index){
                this.page.page = index;
                this.getData();
            },
            /**
             * 添加新站点
             */
            tapAdd:function () {
                this.newsCateBoxShow = true;
                this.catePro.data = [];
                this.catePro.name = "";
                this.catePro.page = 1;
                this.cateProList();
            },
            /**
             * 切换数据
             */
            onClickTab:function(ev){
                this.artType =ev;
                this.page.page = 1;
                this.loading = true;
                this.getData();
            },
            /**
             * 删除管理账号
             */
            tapDel:function(id){
                this.$confirm('此操作将移除该产品数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$utils.loading(this, "移除数据中...");
                    SystemPartitionProdel({id: id})
                        .then(res => {
                            this.$utils.loadingClose();
                            this.loading = true;
                            if (res.code == 200) {
                                this.getData();
                            } else {
                                this.$alert(res.msg);
                            }
                        })
                        .catch(err => {
                            this.$utils.loadingClose();
                            this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                        });
                });
            },


            newsCateBoxClose:function () {
                this.newsCateBoxShow = false;
            },

            formSub:function () {
                if(this.selectAr.length <= 0 ) {
                    this.$alert("请点选分区产品", '系统提示');
                    return;
                }
                var idsAr = [];
                for (var i in this.selectAr) {
                    idsAr.push(this.selectAr[i].id);
                }
                this.$utils.loading(this, "操作中...");
                SystemPartitionProsub({
                        ids : idsAr,
                        'partition_id' : this.partition_id
                })
                    .then(res=>{
                        this.newsCateBoxShow = false;
                        this.$utils.loadingClose();
                        if(res.code == 200) {
                            this.getData();
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err => {
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });

            },

            checkSelect:function (id) {
                for (var i in this.selectAr) {
                    if(this.selectAr[i].id == id) {
                        return true;
                    }
                }
                return  false;
            }
        }
    }
</script>
<style scoped lang="stylus">
    .Box
        >>> .ivu-modal-body
            height 700px
            overflow: auto;
    .tabBox_img
        width 36px
        height 36px
        border-radius:4px
        cursor pointer
        img
            width 100%
            height 100%
</style>
